<template>
  <div class="white-list">
    <!-- 搜索 -->
    <div class="white-search">
      <el-input placeholder="请输入内容" class="input-with-select" v-model="searchValue" @keyup.enter.native="changedata">
        <el-button class="white-find" slot="append" icon="el-icon-search" @click="changedata">搜索</el-button>
      </el-input>
    </div>
    <!-- 
      列入原因
      成立年限
      加入时间 -->
    <div class="white-condition c-shadow">
      <div class="white-state">
        <!-- 加入时间 -->
        <div class="white-time clearFix">
          <div class="clearFix labelBox fl">
            <div class="mgr-50 date-picker fl">
              <span class="dataType fl">加入时间</span>
              <j-date-picker v-model="startTime" :max="maxTime" @change="fliterChange('t')"></j-date-picker>
              <span class="space-mark"></span>
              <j-date-picker v-model="endTime" :min="startTime" :max="curTime" @change="fliterChange('t')"></j-date-picker>
            </div>
          </div>
        </div>
        <!-- 列入原因 -->
        <div class="white-reason clearFix">
          <div class='clearFix labelBox fl'>
            <span class='dataType fl'>列入原因</span>
            <label class="fl" v-for="(item,ind) in includedReason" :class="{cols:item.flag}" :key="ind" @click="addSelected(item,'reason')">{{item.name}}</label>
          </div>
        </div>
        <!-- 安全期限 -->
        <div class="white-limit clearFix">
          <div class='clearFix labelBox fl'>
            <span class='dataType fl'>安全期限</span>
            <label class="fl" v-for="(item,ind) in safetyLimit" :class="{cols:item.flag}" :key="ind" @click="addSelected(item,'safety')">{{item.name}}</label>
          </div>
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <j-loading mode='f' v-show="isShowLoading"></j-loading>
    <div class="white-supervise c-shadow">
      <div class="white-main">
        <div class="white-fliter clearFix">
          <div class="clearFix labelBox">
            <span class="publist-list-category fr">
              <j-select ref="selectDate" class="select" v-model="fliterData" :initItems="fliterDatas" :selectedIndex="fliterDataidx">
              </j-select>
            </span>
            <!-- <div class="main-lead fl">
              <form enctype="multipart/form-data" method="post" id="formUpload" class="fl cursor">
                <span class="import-btn fl cursor"><i class="iconfont icon-daorumoban"></i> 企业列表导入</span>
                <input class="file-input cursor" type="file" name="file" @change="fileUpload"
                      accept=".XLS,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
              </form>
              <a class="fl template" :href="exportSrc">导出模板.xls</a>
              <span class="black fl">注：请按照模板样式上传企业列表</span>
            </div> -->
          </div>
        </div>
        <j-no-data :mode="'b'" msg="b" v-if="listData.length === 0"></j-no-data>
        <table class="table-list" width="100%" border="0" cellspacing="0" cellpadding="0" v-else>
          <thead>
            <th v-for="item in whiteList" :key="item">{{item}}</th>
          </thead>
          <tr v-for="(list, index) in listData" :key="index">
            <td class="overflow-hidden">
              <router-link tag="span" class="ent-name cursor" :title="list.entName" :to="{name:'baseinfo', query: {entid:list.id,entname:list.entName }}">{{list.entName || '--'}}</router-link>
              <span class="block">
                <span>成立时间：</span><span>{{list.registerDate | dateFormat}}</span>
              </span>
              <span class="block overflow-hidden" :title="list.address">
                <span>注册地址：</span><span>{{list.address || '--'}}</span>
              </span>
            </td>
            <td>{{list.oprateReson || '--'}}</td>
            <td :title="list.entType">{{list.entType || '--'}}</td>
            <td>{{list.timeLimit || '--'}}</td>
            <td>{{list.realName || '--'}}</td>
            <td>{{list.startTime | dateFormat}}</td>
            <td :title="list.remarks">
              {{list.remarks || '--'}}
            </td>
          </tr>
        </table>
      </div>
    </div>
    <!-- tab -->
    <div class="white-tab">
      <span class="mt2 fl">
        白名单企业<span class="compnum"> {{listParams.total || 0}} </span>家
      </span>
      <div class="block paging-wrap fr" v-if="listParams.total > 5">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="listchange"
          :current-page.sync="listParams.pageNum"
          :page-size.sync="listParams.pageSize"
          :total.sync="listParams.total"
          layout="prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { jSelect, jDatePicker, jNoData, jLoading } from '../../components'
import { sysManage as api } from '../../api'
export default {
  name: "whiteList",
  data() {
    return {
      // 已选条件
      alreadySelect: [],
      searchValue: '',
      reasonLabel: '',
      safetyLabel: '',
      fliterLabel: '',
      // 列入原因
      includedReason: [
        {
          name:'不限',
          flag: true
        },
        {
          name:'优质企业',
          flag: false
        },
        {
          name:'国资企业',
          flag: false
        },
        {
          name:'中央企业',
          flag: false
        },
        {
          name:'挂牌机构',
          flag: false
        },
        {
          name:'其他',
          flag: false
        }
      ],
      // 安全期限
      safetyLimit: [
        {
          name:'不限',
          flag: true
        },
        {
          name:'一个月',
          flag: false
        },
        {
          name:'三个月',
          flag: false
        },
        {
          name:'六个月',
          flag: false
        },
        {
          name:'一年',
          flag: false
        },
        {
          name:'永久安全',
          flag: false
        }
      ],
      // 筛选
      fliterDatas: [
        '加入时间', '成立时间'
      ],
      fliterDataMap: ['startTime', 'registerDate'],
      fliterDataidx: 0,
      fliterData: '',
      // 列表
      whiteList: [
        '企业信息', '列入原因', '企业类型', '安全期限', '加入用户', '加入时间', '备注'
      ],
      listData: [ ],
      listParams: {
        pageNum: 1,
        pageSize: 5,
        order: 'desc'
      },
      // 时间
      startTime: '',
      endTime: '',
      // 导出
      exportSrc:'',
      isShowLoading: false,
      // 导入
      importingList: []
    }
  },
  components:{
    jSelect, jDatePicker, jNoData, jLoading
  },
  computed: {
    maxTime() {
      if ((new Date().valueOf() - new Date(this.endTime).valueOf()) > 0) {
        return this.endTime
      } else {
        return this.curTime
      }
    },
    curTime() {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() > 9 ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))
      let day = date.getDate() > 9 ? date.getDate() : ('0' + date.getDate())
      return year + '-' + month + '-' + day
    }
  },
  watch: {
    // 筛选条件
    fliterData(value) {
      let label = this.fliterDataMap[this.fliterDatas.indexOf(value)]
      if (label) {
        this.fliterLabel = label
      }
      this.listParams.pageNum = 1
      this.changedata()
    }
  },
  mounted() {
    this.changedata()
  },
  methods:{
    // 原因年限时间添加到已选标签方法 增加条件
    addSelected(item, type) {
      // 原因
      if (type === 'reason') {
        this.includedReason.forEach(reason => {
          reason.flag = false
          if (reason.name === item.name) {
            this.reasonLabel = item.name || this.reasonLabel
            reason.flag = true
          }
        })
      }
      // 期限
      if (type === 'safety') {
        this.safetyLimit.forEach(safety => {
          safety.flag = false
          if (safety.name === item.name) {
            this.safetyLabel = item.name || this.safetyLabel
            safety.flag = true
          }
        })
      }
      this.alreadySelect = []
      // 原因
      if (this.reasonLabel && this.reasonLabel !== '不限') {
        this.alreadySelect.push(
          this.reasonLabel
        )
      }
      // 期限
      if (this.safetyLabel && this.safetyLabel !== '不限') {
        this.alreadySelect.push(
          this.safetyLabel
        )
      }
      // console.log(this.alreadySelect)
      this.listParams.pageNum = 1
      this.changedata()
    },
    // 加入时间
    fliterChange(type) {
      if (type) {
        this.isShowLoading = true
        setTimeout(() => {
          this.isShowLoading = false
        }, 1000)
      }
      this.changedata()
    },
    // 数据改变
    changedata(param) {
      let params = {
        pageSize: 5,
        pageNum: 1
      }
      // 搜索内容 可模糊
      if (this.searchValue) {
        params.searchName = this.searchValue
      } else {
        delete params.searchName
      }
      // 原因
      if (this.reasonLabel !== '不限') {
        params.oprateReson = this.reasonLabel
      } else {
        delete params.oprateReson
      }
      // 安全期限
      if (this.safetyLabel !== '不限') {
        params.timeLimit = this.safetyLabel
      } else {
        delete params.timeLimit
      }
      // 开始时间
      if (this.startTime !== '') {
        params.qStartTime = this.startTime + ' 00:00:00'
      } else {
        delete params.qStartTime
      }
      // 结束时间
      if (this.endTime !== '') {
        params.qEndTime = this.endTime + ' 23:59:59'
      } else {
        delete params.qEndTime
      }
      // 限制词
      if (this.fliterLabel) {
        params.sortColumn = this.fliterLabel
      } else {
        delete params.sortColumn
      }
      // 分页
      if (param) {
        params = Object.assign(params, param)
      }
      params = Object.assign(params, this.listParams)
      // console.log(params)
      this.getEntlist(params)
    },
    // 获取白名单列表
    getEntlist(params) {
      api.getriskEntListgetWhiteListEnts(params).then(ret => {
        // console.log(ret.data)
        this.listData = ret.data.list
        this.listParams.total = ret.data.total
      }).catch(err => {
        console.log(err.msg)
      })
      // this.listParams.total = this.listData.length
    },
    // 分页改变
    listchange() {
      this.changedata()
    },
    // pagesize改变
    handleSizeChange() {},
    // 企业列表导入
    fileUpload(evt) {
      if (this.importingList.length > 4) {
        // this.fancybox.hint = '导入任务最多同时进行5个'
        // this.fancybox.show = true
        this.clearInput()
        return
      }
      let target = evt.target || evt.srcElement
      let file = target.files[0]
      if (!file) {
        return
      }
      let reg = /[.](xlsx|xls|xlsm|xltm)$/
      if (!reg.test(file.name)) {
        this.clearInput()
        return
      }
      // let token = sessionStorage.getItem('token')
      let token = JSON.parse(sessionStorage.getItem('user')).token
      let curConfig = {
        timeout: 600000,
        headers: {
          Authorization: token
        }
      }
      console.log(curConfig)
      let formData = new FormData()
      formData.append('file', file)
      // axios
      //   .post(
      //     window.api_host + '/xxx',
      //     formData,
      //     curConfig
      //   )
      //   .then(rst => {
      //     // rst.data:1,上传的excel与模版不匹配时
      //     // rst.data:2,部分企业本地库中已存在时
      //     // rst.data:3,正常,导入未出现异常,刷新列表
      //     if (rst.data && rst.data === 3) {
      //       console.log('上传成功')
      //     }
      //     this.clearInput()
      //   })
    },
    clearInput() {
      let form = document.getElementById('formUpload')
      form.reset()
    }
  }
}
</script>

<style lang="scss" scoped>
.white-list {
  width: 100%;
  .overflow-hidden {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .cursor {
    cursor: pointer;
  }
  .block{
    display: block;
  }
  .fr {
    display: block;
    float: right !important;
  }
  .mgl {
    margin-left: 150px;
  }
  .template {
    color: #5555FD;
  }
  .compnum {
    color: #F99F7B;
    font-weight: bold;
  }
  .cols {
    color: #0085f6 !important;
  }
  .white-search {
    text-align: center;
    .input-with-select {
      width: 438px;
      height: 36px;
      margin: 0 auto;
      border-radius: 3px 0px 0px 3px;
      .white-find {
        height: 38px;
        background: #3385f1;
        color: #fff;
        border-radius: 0px 3px 3px 0px;
      }
    }
  }
  .detail-base-title {
    width: 100%;
    text-align: center;
    line-height: 20px;
    font-size: 20px;
    font-weight: bold;
    padding-top: 25px;
  }
  .white-condition {
    width: 100%;
    margin: 20px 0px;
    height: auto;
    min-height: 174px;
    background: #fff;
    border-radius: 5px;
    .white-state {
      padding: 13px 30px;
      .dataType {
        font-size: 14px;
        color: #999;
        // height: 48px;
        padding-top: 5px;
        margin-right: 57px;
      }
      .white-tj {
        width: 97%;
        justify-content: space-between;
      }
      .white-qk {
        width: 3%;
      }
      .labelBox {
        .white-qk {
          width: 5%;
        }
        label {
          margin: 5px 80px 10px 0;
          cursor: pointer;
          font-size: 14px;
          color: #333;
        }
      }
      .white-selected {
        border-bottom: 1px solid #d6d6d6;
        a {
          color: #14aaff;
          margin-top: 16px;
          font-size: 14px;
          text-decoration: underline;
        }
        .labelBox {
          // width: 100%;
          padding-top: 10px;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          label {
            color: #1688f3;
            background: #f0f7ff;
            padding: 7px 24px;
            border: 1px solid #9dc5fd;
            border-radius: 4px;
            margin: 0 46px 20px 0;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            position: relative;
            .white-clear {
              width: 20px;
              height: 20px;
              position: absolute;
              right: -10px;
              top: -8px;
              background: url(../../assets/images/clear.png) no-repeat;
            }
          }
          .dataType {
            height: 52px;
            margin-right: 60px;
          }
        }
      }
      .white-time,
      .white-reason,
      .white-limit {
        margin-top: 15px;
        label:hover {
          color: #0085f6;
        }
        label.sel {
          color: #0085f6;
        }
      }
      .white-time {
        padding-bottom: 25px;
        border-bottom: 1px solid #ccc;
      }
      .date-picker {
        margin-right: 250px;
      }
      .space-mark {
        display: inline-block;
        width: 8px;
        height: 2px;
        vertical-align: middle;
        margin: 0 4px 0 8px;
        background-color: rgba(18, 108, 236, 0.5);
      }
      .white-reason {
        .dataType {
          // margin-right: 85px;
        }
      }
    }
  }
  .white-supervise {
    width: 100%;
    background: #fff;
    border-radius: 5px;
    .labelBox {
      .white-qk {
        width: 5%;
      }
      label {
        margin: 5px 80px 10px 0;
        cursor: pointer;
        font-size: 14px;
        color: #333;
      }
    }
    .white-main {
      padding: 20px 30px;
      height: auto;
      .main-lead {
        display: inline-block;
        padding-top: 5px;
        position: relative;
        form {
          color: #fff;
        }
        a,
        span {
          margin: 5px 0 0 50px;
          color: #1688f3;
          font-size: 14px;
        }
        span {
          color: #fff;
        }
        span.import-btn {
          display: inline-block;
          background: #3385f1;
          color: #ffffff;
          border-radius: 5px;
          font-size: 14px;
          padding: 5px 24px;
          margin: 0 0 0 0;
        }
        .file-input {
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          font-size: 50px;
          width: 150px;
          height: 30px;
          cursor: pointer;
          color: #fff;
        }
      }
      .table-list {
        width: 100%;
        margin-top: 20px;
        border-radius: 5px;
        font-size: 12px !important;
        line-height: 40px;
        margin-bottom: 20px;
        border: 1px solid #c7e0f7;
        border-collapse: collapse;
        color: #666;
        th {
          background: #e9f3ff;
          text-align: center;
        }
        tr:nth-of-type(even) {
          background: #f3f8ff;
        }
        tr:hover {
          background: #fffaeb;
        }
        tr {
          line-height: 40px;
        }
        td {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span {
            // padding: 5px 10px;
            padding: 5px 8px 5px 5px;
            border-radius: 5px;
          }
        }
        th:first-child {
          width: 270px;
        }
        th:last-child {
          width: 145px;
        }
        .ent-name,
        th {
          font-weight: bold;
          color: #333;
          font-size: 14px;
        }
        th,
        td {
          text-align: center;
        }
        td:first-child {
          text-align: left;
        }
      }
    }    
    .black {
      color: #ff7200 !important;
    }
  }
  .white-tab {
    height: auto;
    padding: 5px 40px;
    .mt2,
    .paging-wrap {
      margin-top: 20px;
    }
  }
}
</style>


// WEBPACK FOOTER //
// src/view/sysManage/whiteList.vue